@import "common.scss";

@function getvw($w) {
    @return($w/750)*100+vw
}

;

* {
    margin: 0;
    padding: 0;
}

.wrap {
    header {
        .top {
            height: getvw(100);
        }

        nav {
            // margin-top: getvw(50);
            width: getvw(750);
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            background-color: white;
            z-index: 999;
            box-sizing: border-box;

            button {
                width: getvw(123);
                height: getvw(57);
                background-color: white;
                border-radius: getvw(20);
                border: 1px solid #ff9344;
            }

            p {
                font-size: getvw(25);
            }

            .area {
                position: relative;

                select {
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }

                i {
                    // font-size: getvw();
                    color: #ff9344;
                    position: absolute;
                    right: getvw(11);
                    pointer-events: none;
                    right: getvw(16);
                    transform: translateY(-50%);
                    top: 50%;
                }
            }
        }
    }

    .search {
        position: relative;
        width: 100%;

        .inputbox {
            margin: 0 auto;
            width: getvw(265);
            input {
                width: 100%;
                height: getvw(50);
                border: 1px solid #ff9344;
                border-radius: getvw(50);
                font-size: getvw(24);
                padding: 0 getvw(25);
            }
        }

        i {
            font-size: getvw(30);
            color: #ff9344;
            position: absolute;
            top: getvw(10);
            right: getvw(265);
        }

        .search-title p {
            margin: getvw(30) 0;
            font-size: getvw(26);
            font-weight: bold;
            text-align: center;
        }

        .search-main {
            margin: 0 auto;
            width: getvw(515);
            height: getvw(140);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            div {
                width: getvw(125);
                height: getvw(65);
                background-color: gray;
                text-align: center;
                line-height: getvw(65);
            }
        }
    }
    .hot{
        .hot-top{
            display: flex;
            position: relative;
            margin-top: getvw(20);
            img{
                width: getvw(54);
                height: getvw(42);
                margin-left: getvw(40);
            }
            p:nth-of-type(1){
                font-size: getvw(30px);
                font-weight: bold;
                margin-left: getvw(10);
            }
            p:nth-of-type(2){
                font-size: getvw(24px);
                font-weight: bold;
                position: absolute;
                top: getvw(10);
                right: getvw(45);
            }
            i{
                position:absolute;
                top: getvw(10);
                right: getvw(10);
                color: #ff9344;
            }

        }
        .hot-main{
            display: flex;
            padding: getvw(20);
            .hot-main-left{
                width: getvw(280);
                height: getvw(352);
                margin-right: getvw(10);
                img{
                    width: 100%;
                }
            }
            .hot-main-right{
                div:nth-of-type(1){
                    width: getvw(420);
                    height: getvw(147);
                    img{
                        width: 100%;
                    }
                }
                div:nth-of-type(2){
                    display: flex;
                    div:nth-of-type(1){
                        width: getvw(195);
                        height: getvw(197);
                        margin-top: getvw(10);
                        img{
                            width: 100%;
                        }
                    }
                    div:nth-of-type(2){
                        width: getvw(211);
                        height: getvw(197);
                        margin: getvw(10) 0 0 getvw(10);
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    .recommend{
        .recommend-top{
            display: flex;
            position: relative;
            margin-top: getvw(20);
            i:nth-of-type(1){
                color: #ff9344;
                font-size: getvw(60);
                margin-left: getvw(40);
            }
            span:nth-of-type(1){
                font-size: getvw(30px);
                font-weight: bold;
                margin-left: getvw(10);
                line-height: getvw(80);
            }
            span:nth-of-type(2){
                font-size: getvw(24px);
                font-weight: bold;
                position: absolute;
                top: getvw(20);
                right: getvw(45);
            }
            i:nth-of-type(2){
                position:absolute;
                top: getvw(20);
                right: getvw(10);
                color: #ff9344;
            }

        }
        .recommend-main{
            display: flex;
            justify-content: space-around;
            div{
                width: getvw(228);
                height: getvw(200);
                img{
                    width: 100%;
                }
            }
        }
    }
    footer{
        ul{
            li:nth-of-type(3) i{
                 color: #ff9344;
            }
        }
    }
}